﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *{
            margin:0;
            padding:0px;
            list-style:none;
        }
        .box{
            width:500px;
            height:500px;
            margin:100px auto;
          
        }
        .he {
            display: flex;
            justify-content: center;
            margin-bottom:20px;
        }
        .he p{
            margin-right:20px;
        }
        .he1 {
            margin: 20px auto;
            width: 70px;
            height: 20px;
            border-bottom: 2px solid #000000;
            justify-content: center;
            display: flex;
        }
        .bo{
            height:400px;
            padding:20px;
        }
        li {
            width: 50px;
            line-height: 50px;
            float: left;
            border: 1px solid #000000;
            margin: 20px;
            text-align: center;
           transition:all .2s inherit;
          
        }
            li:hover {
                box-shadow:#B6F1EE 0px 0px 10px 10px ;
                transform:scale(1.1);
             }
    </style>
</head>
<body>
    <div class="box">
        <div class="he"><button>换一个</button></div>
        <div class="he1"><p></p><p></p><p></p><p></p></div>
        <div class="bo"> <ul>
    
    <li></li>
</ul>
        
        </div>
    </div>

    <script>
        let arr = [`吊图一堆`, `及你太美`, `自产自销`, `老八蜜汁`, `耗子位置`]
        let arr1 = [`吊`, `图`, `一`, `堆`, `及`, `你`, `太`, `美`, `自`, `产`, `自`, `销`, `老`, `八`, `蜜`, `汁`, `耗`, `子`, `位`, `置`]

        function bo() {
            let str = ``;
            let arr2 = [];
            let arr3 = [];
            for (var i = 0; i < 500; i++) {
                var j = Math.floor(Math.random() * arr1.length);
                if (arr2.includes(j)) {

                } else {
                    arr2.push(j);
                }
                if (arr2.length == 20) {
                    break;
                }
            }
           
            for (var i of arr2) {
                for (var j = 0; j < 6; j++) {
                    arr3[arr3.length] = Math.floor(Math.random() * 255);
                }
               
                str += `<li style="border-image: linear-gradient(rgb(${arr3[0]}, ${arr3[1]}, ${arr3[2]}),rgb(${arr3[3]}, ${arr3[4]}, ${arr3[5]})) 1; color:rgb(${arr3[1]}, ${arr3[3]}, ${arr3[5]}) ">${arr1[i]}</li>`;
                arr3 = [];
            }
            let ul = document.querySelector(`ul`);
            ul.innerHTML = str;
           
            
        }
        function he() {
            var j = Math.floor(Math.random() * arr.length);
            let div = document.querySelector(`.he`);
            let p = document.createElement(`p`);
            div.insertBefore(p, div.lastElementChild);
            p.innerHTML = `${arr[j]}`;
        }
        function butt() {
            let ps = document.querySelectorAll(`.he1>p`);
            let div = document.querySelector(`.he`);
            bo();
            he();
            let p = document.querySelector(`.he>p`);
            div.removeChild(p);
            for (var i = 0; i < ps.length; i++) {
                ps[i].innerHTML = ``;
            }
        }
        function onck() {
            let lis = document.querySelectorAll(`li`);
            let ps = document.querySelectorAll(`.he1>p`);
            let p = document.querySelector(`.he>p`);
            let j = 0;
            let arr2 = []
            for (let i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    arr2[arr2.length] = this.innerHTML;
                    ps[j++].innerHTML = `${this.innerHTML}`
                   
                    setTimeout(function () {
                        if (arr2.length == 4) {
                            if (arr2.join(``) == p.innerHTML) {
                                alert(`你输入正确`);
                                butt();
                                onck();
                            } else {
                                alert(`你输入错误`);
                                for (var i = 0; i < ps.length; i++) {
                                    ps[i].innerHTML = ``;
                                    j = 0;
                                    arr2 = [];
                                }
                            }
                        }
                    }, 4);

                }
            }
        }


        bo();
        he();
        onck();
        let but = document.querySelector(`button`);
        but.onclick = function () {
            butt();
            onck();
        }
      
       
       
      
    </script>
</body>
</html>